﻿@{
    this.ViewBag.Title = "Change Password";
    this.Layout = "~/Views/Shared/_AdminLayout.cshtml";
}

@section ScriptSection
{
    <script type="text/javascript">
        $(function () {
            var changePassword = new ChangePassword();
            ko.applyBindings(changePassword, document.getElementById("main"));
        });
    </script>
}

<div id="main">
    <div class="form" style="width:75%; margin-top:40px">
        <fieldset>
            <legend>Change password</legend>
            <div>
                <div class="success" data-bind="text: successMessage"></div>
                <div class="error" data-bind="html: errorMessage"></div>
            </div>
            <div class="left" style="width: 25%">
                <span>Login:</span>
            </div>
            <div class="right" style="width: 70%">
               <input type="text" data-bind="value: name, valueUpdate: 'afterkeydown', css: { 'errorBox': name.hasError }" />
            </div>
            <div class="clear"></div>
            <div class="left" style="width: 25%">
                <span>Old Password:</span>
            </div>
            <div class="right" style="width: 70%">
               <input type="password" data-bind="value: password, valueUpdate: 'afterkeydown', css: { 'errorBox': password.hasError }" />
            </div>
            <div class="clear"></div>
            <div class="left" style="width: 25%">
                <span>New Password:</span>
            </div>
            <div class="right" style="width: 70%">
               <input type="password" data-bind="value: newPassword, valueUpdate: 'afterkeydown', css: { 'errorBox': newPassword.hasError }" />
            </div>
            <div class="clear"></div>
            
            <div class="left" style="width: 25%">
                <span>Repeat Password:</span>
            </div>
            <div class="right" style="width: 70%">
               <input type="password" data-bind="value: repeatPassword, valueUpdate: 'afterkeydown', css: { 'errorBox': repeatPassword.hasError }" />
            </div>
            <div class="clear"></div>
            <div style="text-align: center">
                <input type="button" data-bind="click: changePassword" value="Change password" />
            </div>
        </fieldset>
    </div>
</div>


